<template>
  <div>
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      text-color="#fff"
      background-color="#012944"

    id="menu">
      <el-submenu index="0">
        <template slot="title">工作台</template>
        <el-menu-item index="1" v-if="!logined">登陆</el-menu-item>
        <el-menu-item index="2" v-if="!logined">注册</el-menu-item>
        <el-menu-item index="3" v-if="logined">修改信息</el-menu-item>
        <el-menu-item index="4" v-if="logined">退出登陆</el-menu-item>
      </el-submenu>
    </el-menu>

    <el-dialog title="登陆" :visible="openLogin">
      <Login
        @close="
          () => {
            activeIndex = '';
          }
        "
        @success="
          () => {
            logined = true;
            activeIndex = '';
          }
        "
      ></Login>
    </el-dialog
    >
    <el-dialog title="注册" :visible="register">
      <Register
        @close="
          () => {
            activeIndex = '';
            register = false;
          }
        "
        @success="
          () => {
            register = false;
            activeIndex = '';
          }
        "
      ></Register>
    </el-dialog>
  </div>
</template>


<script>
import Login from "./Login.vue";
import Register from "./register.vue";
export default {
  components: {
    Login,
    Register
  },

  data() {
    return {
      logined: false,
      register: false,
      activeIndex: "",
    };
  },
  computed: {
    openLogin() {
      return this.activeIndex === "1";
    },
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, this.activeIndex);
      let action = ["登陆", "注册", "修改信息", "退出登陆"];
      if (key === "2") {
        this.register = true;
        return;
      }
      if (key === "4") {
        this.$message({ message: "已退出登陆！", type: "success" });
        this.logined = false;
        return;
      }
      this.activeIndex = key;

      // console.log(key, keyPath);
    },
  },
};
</script>
<style scoped>
  #menu {
    background-color: rgb(0, 0, 0, 0.2);
    /* opacity: 0.4; */
    border: 0px;
    color: #fff;
  }
</style>